<template>
  <div class=" publicBox" id="accountEdit">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" :rules="rules" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
               <p>账号管理/新建</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="ID" prop="acnt">
                 <el-input class="pubSerIpt" v-model="ruleForm.acnt" v-if="!disabledFlag" placeholder="请输入ID"></el-input>
                 <span v-if="!disabledFlag" class="tipClass">此ID是作为登录ID使用</span>
                 <p v-else>{{ruleForm.acnt}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="姓名" prop="name">
                 <el-input class="pubSerIpt" v-model="ruleForm.name" v-if="!disabledFlag" placeholder="请输入姓名"></el-input>
                 <p v-else>{{ruleForm.name}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="手机号码" prop="mphone">
                 <el-input class="pubSerIpt" v-model.number="ruleForm.mphone"  placeholder="请输入手机号码"></el-input>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="角色权限" prop="pid">
                   <el-select v-model="ruleForm.pid"  filterable placeholder="请选择" class="pubSlt200">
                       <el-option
                         v-for="item in RootOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
       </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree140" v-if="disabledFlag" type="primary" @click="retrunPass">重置密码</el-button>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">提交</el-button>
                         <el-button class="pubBtnGray" @click="canCleFn"  type="primary">取消</el-button>
       </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>

import * as Api from '@api/system.js'
export default {
  components: {


  },
  data() {
    return {
     disabledFlag:false,
     RootOptions: [],
     ruleForm:{
      mphone:"",
      name:"",
      acnt:"",
      pid:""
     },
      rules: {
          mphone: [
            {required: true, message: '请输入手机号码', trigger: 'blur' },
          ],
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          acnt: [
            {required: true, message: '请输入ID', trigger: 'blur' }
          ],
          pid: [
            {required: true, message: '请选择角色权限', trigger: 'blur' }
          ],
        }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
       canCleFn(){
           this.$router.go(-1)
       },
       async getRoot(){   //获取用户权限
             let res=await Api.getRootApi()
             if(res.IsPositive){
                   this.RootOptions=res.Data.records
                   this.ruleForm.pid==""?res.Data.records[0].id:this.ruleForm.pid
             }else this.$message.warning("获取用户权限失败")
        },
       async addAccount(){   //添加账号,
             let res=""
             if(this.disabledFlag){  //disabledFlag==true代表修改
                  this.ruleForm.id=this.$route.query.data.id
                  res=await Api.editAccountApi(this.ruleForm)
             }else{
               res=await Api.addAccountApi(this.ruleForm)
             }    
             if(res.IsPositive){
                   this.$message.success("操作成功");
                   this.$router.push({path:"/platform/system/account"})
             }else this.$message.warning("添加失败")
       },
       submitForm() {     //提交修改记录
           this.$refs["form"].validate((valid) => {
            if (valid) {
              this.addAccount()    
            } else {
              return false;
            }
        });
       },
      resetPassword(){    //重置密码api请求
           let params={id:this.$route.query.data.id}
           Api.resetPassword(params).then(res=>{
             if(res.IsPositive){
                   this.resetTip()
             }else this.$message.error({message:res.ErrorCode})
           })
      },
      retrunPass(){   //重置密码
           this.$confirm('确定重置密码吗', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'info '
           }).then(() => {
               this.resetPassword()
           }).catch(() => {});
      },
      resetTip(){  //提示重置密码成功信息
        this.$alert("重置后的密码为123456,请提醒账号使用人及时修改密码","重置成功", {
          confirmButtonText: '确定',
          callback: action => {
             this.$router.go(-1)
          }
        });
      }
  },
  created() {
           if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
                  this.ruleForm.mphone=this.$route.query.data.mphone
                  this.ruleForm.name=this.$route.query.data.name
                  this.ruleForm.acnt=this.$route.query.data.acnt
                  this.ruleForm.pid=this.$route.query.data.posid
                  this.disabledFlag=true
           }
           this.getRoot()
 
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
.tipClass{
  color:#A7A7A7;
  margin-left: 5px;
}

</style>